<template>
  <div class="container">
    <div class="login">
      <h2 style="margin: 30px 0">管理后台登录</h2>
      <el-form size="medium" label-width="70px">
        <div v-if="loginType === 1">
          <el-form-item label="账号">
            <el-input v-model="loginParams.account" placeholder="请输入用户名或手机号"
                      style="width:250px" :maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="loginParams.password" type="password" placeholder="请输入密码"
                      @keyup.enter.native="handleLogin" style="width:250px" :maxlength="20"></el-input>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="手机">
            <el-input v-model="loginParams.phone" style="width:250px" placeholder="请输入手机号"
                      :maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="验证码" style="text-align: left">
            <el-input v-model="loginParams.code" style="width:110px; margin: 0 40px;" placeholder="请输入验证码"
                      @keyup.enter.native="handleLogin" :maxlength="6"></el-input>
            <el-button v-if="remainSeconds<=0" type="text" @click="sendVerifyCode">发送验证码</el-button>
            <el-button v-else type="text" style="color: #868484">发送验证码{{ remainSeconds }}s</el-button>
          </el-form-item>
        </div>
        <el-button @click="loginType = (loginType===1? 2: 1)">{{ loginType === 1 ? "手机验证码登录" : "账号登录" }}</el-button>
        <el-button type="primary" @click="handleLogin">登录</el-button>
      </el-form>
    </div>
  </div>
</template>
<script>
import * as sysUserApi from "../api/sysUserApi.js";
import {mapMutations} from "vuex"

export default {
  data() {
    return {
      loginType: 1, // 1: 账号登录 2:手机验证码登录
      loginParams: {
        account: '', // 手机号或用户名
        password: '',
        // 手机验证码登录方式参数
        phone: "",
        code: "",
      },
      remainSeconds: 0, // 发送验证码倒计时
    }
  },
  mounted() {
    this.handleCookie() // 查看本地是否缓存了会话
  },
  methods: {
    ...mapMutations(["setUserInfo", "setRouterPath"]),
    handleCookie() {
      try {
        let loginParams = JSON.parse(window.localStorage.getItem("loginParams"))
        if (loginParams)
          this.loginParams = loginParams
      } catch (err) {
      }

      let token = window.localStorage.getItem('token');
      if (token != null) {
        sysUserApi.getUserInfo({
          success: res => {
            this.setUserInfo(res.data)
            this.setRouterPath("/index")
          }
        })
      }
    },
    // 发送手机验证码
    sendVerifyCode() {
      window.localStorage.setItem("loginParams", JSON.stringify(this.loginParams));
      if (this.loginParams.phone.length !== 11) {
        this.$message.error("请输入11位手机号和验证码")
        return
      }

      sysUserApi.sendVerifyCode({
        phone: this.loginParams.phone,
        success: res => {
          this.$notify.success(res.msg)
          if (res.data > 0)
            this.startCountdown(res.data)
        }
      })
    }
    ,
    // 开始倒计时
    startCountdown(remainSeconds) {
      if (remainSeconds <= 0) return;
      let that = this;
      that.remainSeconds = remainSeconds;
      let timer = setInterval(() => {
        that.remainSeconds -= 1;
        if (that.remainSeconds <= 0) clearInterval(timer);
      }, 1000);
    }
    ,
    handleLogin() {
      let that = this;
      window.localStorage.setItem("loginParams", JSON.stringify(that.loginParams));
      if (this.loginType === 1) {
        if (this.loginParams.account === "" || this.loginParams.password === "") {
          this.$message.error("请输入账号和密码")
          return
        }
        sysUserApi.login({
          data: this.loginParams,
          success: res => {
            window.localStorage.setItem("token", res.data)
            this.handleCookie()
          }
        })
      } else {
        if (this.loginParams.phone.length !== 11 || this.loginParams.code === "") {
          this.$message.error("请输入11位手机号和验证码")
          return
        }
        sysUserApi.loginByPhone({
          phone: this.loginParams.phone,
          code: this.loginParams.code,
          success: res => {
            window.localStorage.setItem("token", res.data)
            this.handleCookie()
          }
        })
      }
    }
    ,
  }
}
</script>
<style>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.login {
  margin-top: 150px;
  border: 1px solid #ded6d6;
  width: 400px;
  height: 300px;
  box-shadow: 0 0 10px gray;
}
</style>


